<template>
  <div>
	<div >
		<div class="my-body_left_six">
			<div style="width: 100%; height: 50px; float: left; font-size: 26px;">医院管理</div>
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;"  class="tab_font-size">医院名称：</div>
				<el-input v-model="name" placeholder="请输入内容"
					style=" width: 150px;height: 50px; float: left;" ></el-input>
			</div>

			<el-button type="primary" @click="listtab" plain>查询</el-button>

			<div style="margin-top: 30px;">
				<div>
					<el-button type="primary" @click="area = true" plain>添加</el-button>

					<el-button type="danger" @click="hospitaldel()" plain>删除</el-button>

				</div>
				<el-dialog title="医院科室信息" :visible.sync="area" width="30%" :before-close="handleClose">
					<div style="width: 100%;">
						<el-form ref="form" :model="form" label-width="150px"  >
							<el-form-item label="医院编号">
								<el-input v-model="form.hospital_code" style="width:200px;"></el-input>
								<el-button type="primary">刷新</el-button>
							</el-form-item>
							<el-form-item label="医院名称">
								<el-input v-model="form.hospital_name" style="width:200px;"></el-input>
							</el-form-item>
							<el-form-item label="科室编号">
								<el-input v-model="form.keshi_code" style="width:200px;"></el-input>
							</el-form-item>
							<el-form-item label="科室名称">
								<el-input v-model="form.kehsi" style="width:200px;"></el-input>
							</el-form-item>
							<el-form-item label="医院地址">
								<el-input v-model="form.address" style="width:200px;"></el-input>
								<el-button type="primary" @click="xuanzhediz">...</el-button>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="onSubmit">保存</el-button>
								<el-button>放弃</el-button>
							</el-form-item>
						</el-form>

					</div>
				</el-dialog>
				<el-dialog title="医院科室信息" :visible.sync="areadizhi" width="30%" :before-close="handleCloses">
					<div style="width: 100%;">
						
						<div style="widows: 100%; height:20px;text-align: center ; font-size: 16px; font-weight: 600;" >{{ form.address }}</div>
						<!-- <el-tree
            :data="data"
          :props="defaultProps"
           accordion
             @node-click="handleNodeClick">
                             </el-tree> -->
                        <div class="shengfen" >
							<div class="shshenshienshi">
								<div  v-for="(item,index) in data" :key="index" class="xx_sf" @click="handleNodeClick(item)" >
									<div 
									:class="{'active': activeIndex == index}"
									@click="activeIndex = index" class="anniu_xx_xz">{{ item.area_name }}</div>
									
								</div>
								 
							</div>
							<div class="shshenshienshi" >
								<div  v-for="(item,index) in shengxz" :key="index" class="xx_sf"  @click="handleNodeClick(item)">
									<div 
									:class="{'active': activeIndexx == index}"
									@click="activeIndexx = index" class="anniu_xx_xz">{{ item.area_name }}</div>
									
								</div>
							</div>
							<div class="shshenshienshi" >
								<div  v-for="(item,index) in shijixz" :key="index" class="xx_sf"  @click="handleNodeClick(item)">
									<div 
									:class="{'active': activeIndexs == index}"
									@click="activeIndexs = index" class="anniu_xx_xz">{{ item.area_name }}</div>
								</div>
							</div>
						</div>  
					</div>
				</el-dialog>
				<template>
					<el-table :data="tableData" border style="width: 100%;margin-top: 30px;"  highlight-current-row
					@current-change="handleCurChange" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
						
						<el-table-column fixed prop="hospital_code" label="医院科室编号">
						</el-table-column>
						<el-table-column fixed prop="hospital_name" label="医院名称">
						</el-table-column>
						<el-table-column prop="senddate" label="科室名称">
						</el-table-column>
						<el-table-column prop="address_province" label="省份">
						</el-table-column>
						<el-table-column prop="address" label="医院地址">
						</el-table-column>

					</el-table>
					<el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10]"
            :page-size="pageSize"
            :total="totallist"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
				</template>
			</div>

		</div>
		<div class="my-body_left">
			<div style="width: 100%; height: 50px; float: left; font-size: 26px;">地区管理</div>
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;"  class="tab_font-size">地级市编号：</div>
				<el-input v-model="input" placeholder="请输入内容"
					style=" width: 150px;height: 50px; float: left;"></el-input>
			</div>
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;"  class="tab_font-size">地级市名称：</div>
				<el-input v-model="input" placeholder="请输入内容"
					style=" width: 150px;height: 50px; float: left;"></el-input>
			</div>
			<el-button type="primary" plain>查询</el-button>
			<div style="width: 50%; height: 630px; float: left; overflow-y: auto;">
				<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
			</div>
			<div style="width:50%; float: left;">
				<div style="width: 100%; height: 300px; float: left;">
					<el-button type="primary" @click="onSubmit" plain>添加省会</el-button>
					<el-button>添加地级市</el-button>
				</div>
				<div style="width: 100%; height: 300px; float: left;">

					<el-button>删除地级市</el-button>
					<el-button type="primary" @click="onSubmit" plain>删除省会</el-button>
				</div>
			</div>
		</div>
	</div>

	</div>
</template>

<script>
import { getData, postData, request } from "@/utils/request.js";
export default {
  data() {
    return {
      area: false,
      tjjfsq: false,
      tablisty: false,
      tablistya: false,
      tablistyb: false,
      areatinajia: false,
      key: 1, // 为了能每次切换权限的时候重新初始化指令
      options: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "一般订单",
        },
        {
          value: "3",
          label: "积分订单",
        },
        {
          value: "3",
          label: "样品订单",
        },
        {
          value: "3",
          label: "换货订单",
        },
      ],
      value1: "",
      value2: "",
      value3: "",
      form: {
        hospital_name: "",
        hospital_code: "",
        kehsi: "",
        keshi_code: "",
		area_id:"",
        address: "",
      },
      radio: "授权医院",
      value: "",
      tableData: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "area_name",
      },
      checkAll: false,
      checkedCities: [],
      cities: ["上海", "北京", "广州", "深圳"],
      isIndeterminate: true,
      name: "",
      currentPage: 1,
      pageSize: 5,
      totallist: "",
      currentRow: "",
      areadizhi: false,
      dizhics: "",
      shenshi: "",
      shiji: "",
      quxian: "",
      currentNode: null,
      shengxz: [],
      shijixz: [],
      color: "#fff",
      activeIndex: 0,
      activeIndexx: "",
      activeIndexs: "",
	  ids:"",
	  input:"",
    };
  },
  created() {
    this.listtab();
    this.canshu();
  },
  methods: {
	dizhilist(){
		var data = {
        token: localStorage.getItem("token"),
      };
      postData("hospital/getParams", data).then((res) => {
        console.log(res.data);
        this.data = res.data.area;
      });
	},
    isCheckedisChecked(param) {
      this.checkedItem.value === param;
    },
    xuanzhediz() {
      this.areadizhi = true;
    },
	handleCurChange(val) {
		console.log(val)
        this.ids = val.id;
      },
    handleNodeClick(data) {
      this.color = this.color === "#fff" ? "blue" : "#fff";
      console.log(data.area_deep);
      console.log(data);

      if (data.area_deep == 1) {
        this.form.address = "";
        this.shengxz = data.children;

        this.shenshi = data.area_name;
        this.form.address = this.shenshi;

        console.log(this.shenshi);
      } else if (data.area_deep == 2) {
        if (this.shenshi == "") {
          this.$message({
            message: "警告哦，您还没有选择省",
            type: "warning",
          });
        } else {
          this.form.address = "";
          this.shijixz = data.children;
          this.shiji = this.shenshi + "-" + data.area_name;
          this.form.address = this.shiji;
        }
      } else if (data.area_deep == 3) {
        if (this.shiji == "") {
          this.$message({
            message: "警告哦，您还没有选择市",
            type: "warning",
          });
        } else {
          this.form.address = "";
          this.quxian = this.shiji + "-" + data.area_name;
          this.form.address = this.quxian;
          this.areadizhi = false;
        }
      }

      this.dizhics = data;
      this.form.area_id = data.area_id;
    },
    handleCentChange(val) {
      this.currentRow = val;
    },
    hospitaldel(){
		var data = {
			ids: this.ids,
       
        token: localStorage.getItem("token"),
      };
      postData("hospital/del", data).then((res) => {
        console.log(res.data);
		if(res.code == 0){
            this.listtab()
			this.$message({
          message: '删除成功',
          type: 'success'
        });
		}else{
			this.$message({
          message: res.msg,
          type: 'success'
        });
	}
      });
	},
    onSubmit() {
      var data = {
        hospital_name: this.form.hospital_name,
        hospital_code: this.form.hospital_code,
		kehsi: this.form.kehsi,
		keshi_code: this.form.keshi_code,
		address:this.form.address,
		area_id:this.form.area_id,
        token: localStorage.getItem("token"),
      };
      postData("hospital/operation", data).then((res) => {
        console.log(res.data);
		if(res.code == 0){
            this.listtab()
			this.$message({
          message: '添加成功',
          type: 'success'
        });
		}else{
			this.$message({
          message: res.msg,
          type: 'success'
        });
		}
		
      });
    },
    handleClose() {
      this.area = false;
    },
    handleCloses() {
      this.areadizhi = false;
    },
    canshu() {
      var data = {
        token: localStorage.getItem("token"),
      };
      postData("hospital/getParams", data).then((res) => {
        console.log(res.data);
        this.data = res.data.area;
      });
    },
    listtab() {
		var name = {"a.hospital_name|like":this.name}
      var data = {
        page: this.currentPage,
        limit: this.pageSize,
		search_key: JSON.stringify(name) ,
        token: localStorage.getItem("token"),
      };
      postData("hospital/indexlist", data).then((res) => {
        console.log(res.data);
        this.totallist = res.data.total;
        this.tableData = res.data.data;
      });
    },
    handleClick(row) {
      console.log(row);
    },
    handleCheckAllChange(val) {
      const cityOptions = ["上海", "北京", "广州", "深圳"];
      console.log(val);
      this.checkedCities = val ? cityOptions : [];

      this.isIndeterminate = false;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.listtab();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.listtab();
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.ipt_a {
  width: 300px;
  height: 50px;
  float: left;
}

.ipt_b {
  width: 450px;
  height: 50px;
  float: left;
}
.shengfen {
  width: 100%;
  height: 400px;
  overflow-y: scroll;
}

.shshenshienshi {
  width: 33%;
  float: left;
}
.xx_sf {
  width: 100%;
  height: 24px;
  float: left;
}
.anniu_xx_xz {
  width: 100%;
  height: 24px;
  float: left;
  text-align: center;
  line-height: 24px;
}

.active {
  width: 100%;
  height: 24px;
  float: left;
  background-color: #1890ff;
  border-radius: 5px;
  text-align: center;
  color: #fff;
}

.el-table{
		height: calc(100vh - 382px);
}
</style>